<template>
  <div v-if="isShowAuditContent" class="audit-component">
    <div v-if="pageType !== 'reject'" class="autit-component-header">
      <el-button
        v-show="isShowBack === true"
        type="primary"
        icon="el-icon-audit-back"
        @click="back"
      >{{ dataList.Back }}</el-button>
      <el-button
        v-show="row.isShowHistory === true && isShowBack == false"
        type="primary"
        @click="changePageType('history')"
      >{{ dataList.ViewAuditHistory }}</el-button>
    </div>
    <div v-if="history == false" class="autit-component-body">
      <div v-for="item in auditData" :key="item.id" class="autit-body-item">
        <el-steps direction="vertical" :active="item.active" finish-status="success">
          <el-step
            v-for="nav in item.workFlowInitResponseList"
            :key="nav.id"
            :status="nav.auditStatus === '30' ? 'success' : ''"
            :class="{
              reject: nav.auditStatus === '40' || nav.auditStatus === '60',
              progress:
                (nav.auditStatus === '20' || nav.auditStatus === '0') &&
                nav.nextPerson === 1,
              inReviewDidNotStart:
                nav.auditStatus === '10' || nav.auditStatus === '0',
            }"
          >
            <template slot="description">
              <div class="step-des-content">
                <div class="des-audit_field">
                  <div class="audit_field_title des-title">{{ nav.title }}</div>
                  <div
                    class="audit_field_person"
                    :title="nav.userNameList | formatPerson"
                  >{{ nav.userNameList | formatPerson }}</div>
                </div>
                <div class="des-audit_remark">
                  <div class="audit_remark_name des-title">
                    {{ contentForm(nav) }}
                  </div>
                  <div v-if="nav.auditName != ''" class="audit_remark_content">{{ dataList.LeaveAMessage }}: {{ nav.remark }}</div>
                </div>

                <div class="des-audit_time des-title">{{ nav.auditName == "" ? "" : nav.auditTime }}</div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div v-if="history == true" class="autit-component-body history">
      <div v-for="item in auditDataHistory" :key="item.id" class="autit-body-item">
        <div class="history-audit-createtime history">
          {{ dataList.SubmitTime }}:
          <span>{{ formatHourAndMin(item.createTime) }}</span>
        </div>
        <el-steps direction="vertical" :active="item.active" finish-status="success">
          <el-step
            v-for="nav in item.workFlowInitResponseList"
            :key="nav.id"
            :status="nav.auditStatus === '30' ? 'success' : ''"
            :class="{
              reject: nav.auditStatus === '40' || nav.auditStatus === '60',
              progress:
                (nav.auditStatus === '20' || nav.auditStatus === '0') &&
                nav.nextPerson === 1,
              inReviewDidNotStart:
                nav.auditStatus === '10' || nav.auditStatus === '0',
            }"
          >
            <template slot="description">
              <div class="step-des-content">
                <div class="des-audit_field">
                  <div class="audit_field_title des-title">{{ nav.title }}</div>
                  <div
                    class="audit_field_person"
                    :title="nav.userNameList | formatPerson"
                  >{{ nav.userNameList | formatPerson }}</div>
                </div>
                <div class="des-audit_remark">
                  <div class="audit_remark_name des-title">
                    {{ contentForm(nav) }}
                  </div>
                  <div v-if="nav.auditName != ''" class="audit_remark_content">{{ dataList.LeaveAMessage }}: {{ nav.remark }}</div>
                </div>

                <div class="des-audit_time des-title">{{ nav.auditName == "" ? "" : nav.auditTime }}</div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>
<script>
import { WorkFlowInit } from "../../api/WorkFlow/WorkFlow";
import { WorkFlowHistory } from "../../api/WorkFlow/WorkFlow";
import { formatHourAndMin } from "../../utils/time";
export default {
  name: "ExperimentTemplateEdit",
  components: {},
  filters: {
    formatPerson(val) {
      return Array.isArray(val) && val.length ? val.join("/") : "";
    },
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: true,
    },
    pageType: {
      type: String,
      default: "", // init reject 驳回 reissue 驳回重新发起 history 查看历史
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    row: { type: Array, default: () => [] },

    taskData: {
      type: Array,
      default: () => [],
    },
    reportData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      auditDataHistory: [],
      isShowBack: false,
      history: false,
      isShowHistoryDialog: false,
      auditData: [],
      filterForm: {
        userGroupAuidtOrLeaderAudit: this.row.userGroupAuidtOrLeaderAudit,
        workFlowDictcode: this.row.workFlowDictcode,
        auditDataId: this.row.auditDataId,
        dataGroup: this.row.dataGroup,
      },
      isShowAuditContent: false,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleWorkFlow.buttons");
    },
    dataList() {
      return this.$t("ModuleWorkFlow.WorkFlow");
    },
  },
  watch: {
    dialogFormVisible: {
      handler(val) {
        this.isShowAuditContent = val;
        this.isShowAuditContent;
      },
      immediate: true,
    },
  },
  created() {
    this.getList();
  },
  methods: {
    contentForm(obj) {
      if (obj.auditStatus === "0") {
        if (obj.nextPerson === 1) {
          return this.$t("ModuleWorkFlow.WorkFlow.BeingApproved");
        } else {
          (this.$t("ModuleWorkFlow.WorkFlow.WaitingProcess"));
        }
      } else {
        return obj.auditName + " ( " + obj.auditStatusName + " )";
      }
    },
    formatHourAndMin,
    init() {
      this.auditData.forEach((x) => {
        this.$set(
          x,
          "active",
          x.workFlowInitResponseList.findIndex((v) => v.auditStatus === "30") +
          1
        );
      });
    },
    initHistory() {
      this.auditDataHistory.forEach((x) => {
        this.$set(
          x,
          "active",
          x.workFlowInitResponseList.findIndex((v) => v.auditStatus === "30") +
          1
        );
      });
    },
    changePageType(val) {
      this.getListHistory();
      this.history = true;
      this.isShowBack = true;
    },
    back() {
      this.getList();
      this.history = false;
      this.isShowBack = false;
    },
    getListHistory() {
      WorkFlowHistory({
        ...this.filterForm,
      })
        .then((res) => {
          // 分页序号连续
          this.auditDataHistory = res.data;
          this.initHistory();
        })
        .catch((res) => { });
    },
    getList() {
      WorkFlowInit({
        ...this.filterForm,
      })
        .then((res) => {
          // 分页序号连续
          this.auditData = res.data;

          this.init();
        })
        .catch((res) => { });
    },
  },
};
</script>
<style lang="scss" scoped>
.audit-component {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: scroll;
  box-sizing: border-box;
  // padding: 24px 132px 24px 24px;
  .autit-component-header {
    margin-bottom: 24px;

    ::v-deep .el-icon-audit-back {
      background: url("../../img/fanhui.png") no-repeat;
      font-size: 16px;
      background-size: cover;

      &::before {
        content: "替";
        font-size: 16px;
        visibility: hidden;
      }
    }

    & > button {
      display: flex;
      align-items: center;
      margin: 0;
    }
  }
  .autit-component-body {
    &.history {
      .autit-body-item .el-steps {
        padding-left: 15px;
      }
    }
    .autit-body-item {
      overflow: hidden;
      ::v-deep .el-step {
        flex-basis: 160px !important;
        margin-bottom: 0;

        &.inReviewDidNotStart {
          .el-step__line {
            background-color: rgba(153, 153, 153, 0.5) !important;
          }
        }
        &.reject {
          .el-step__line {
            background-color: rgba(153, 153, 153, 0.5) !important;
          }
          .el-step__icon {
            background-color: rgba(255, 77, 79) !important;
            border: none;

            &::after {
              content: "";
              width: 36px;
              height: 36px;
              border-radius: 50%;
              background: rgba(255, 77, 79, 0.2);
              position: absolute;
              top: -2px;
              left: -2px;
            }

            & > div {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 22px;
            }
          }

          .audit_field_title {
            color: rgba(255, 77, 79);
          }
        }

        &.progress {
          .el-step__head {
            width: 36px;

            .el-step__line {
              background-color: rgba(153, 153, 153, 0.5) !important;
            }
            .el-step__icon {
              background-color: #2247ff !important;
              color: #fff !important;
              border: none;
              position: relative;

              &::after {
                content: "";
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(34, 71, 255, 0.2);
                position: absolute;
                top: -2px;
                left: -2px;
              }
            }
          }
        }

        .el-step__head {
          width: 36px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;

          &.is-success {
            .el-step__icon {
              border-color: #2247ff !important;
              color: #2247ff !important;
            }
          }

          .el-step__line {
            left: 15px;
            top: 48px;
            width: 1px;
            height: 100px;
            background-color: #2247ff;
          }
          .el-step__icon {
            height: 32px;
            width: 32px;
            background: #fff;
            border-color: #cdcdcd;

            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 0.5);
            line-height: 22px;
          }
        }

        .el-step__main {
          .el-step__title {
            padding: 0;
          }
          .el-step__description {
            margin-top: 0;
            padding-right: 0;
          }
        }
      }

      .history-audit-createtime {
        font-size: 16px;
        font-family: "Microsoft YaHei";
        color: #2a2b2d;
        line-height: 21px;
        margin-bottom: 24px;
        padding-left: 12px;
        position: relative;

        &::before {
          content: "";
          width: 3px;
          height: 14px;
          background: #3a7efc;
          border-radius: 2px;
          position: absolute;
          top: 4px;
          left: 0;
        }

        & > span {
          display: inline-block;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
        }
      }

      .step-des-content {
        display: flex;
        justify-content: space-between;
        .des-title {
          height: 32px;
          font-size: 16px;
          font-family: "Microsoft YaHei";
          color: #666666;
          line-height: 32px;
        }
        .des-audit_field {
          .audit_field_person {
            width: 226px;
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #999999;
            line-height: 19px;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .des-audit_remark {
          width: 252px;
          .audit_remark_content {
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #666666;
            line-height: 19px;

            overflow: hidden; /*超出的部分隐藏起来。*/
            text-overflow: ellipsis; /* 支持 IE */
            display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
            -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
            -webkit-line-clamp: 5; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
          }
        }

        .des-audit_time {
          width: 160px;
        }
      }
    }
  }
}
</style>
